<template>
	<view>
		<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
		<me-tabs v-model="tabIndex" :tabs="tabs" :fixed="true" :tab-width="130"></me-tabs>
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs"></mescroll-item>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import MeTabs from '@/components/me-tabs/me-tabs.vue' ;
	import MescrollItem from "./mescroll-swiper-item.vue";

	export default {
		components: {
			MescrollItem , 
			MeTabs
		},
		data() {
			return {
				height: "400px", // 需要固定swiper的高度
				tabs: [{
					name: '待付款' ,
					order_status : 0 ,
				}, {
					name: '待出行',
					order_status : 1 ,
				}, {
					name: '已入住',
					order_status : 2 ,
				}, {
					name: '已完成',
					order_status : 3 ,
				}, {
					name: '已取消',
					order_status : 4 ,
				}],
				tabIndex: 0 // 当前tab的下标
			}
		},
		methods: {
			// 轮播菜单
			swiperChange(e) {
				this.tabIndex = e.detail.current
			},
			// 获取指定下标的mescroll对象
			// getMescroll(i){
			// 	let mescrollItems = this.$refs.mescrollItem;
			// 	if(mescrollItems){
			// 		let item = mescrollItems[i]
			// 		if(item) return item.mescroll
			// 	}
			// 	return null
			// }
		},
		// async 
		onLoad(options) {
			this.tabIndex = options.order_status ;
			// 需要固定swiper的高度
			this.height = uni.getSystemInfoSync().windowHeight + 'px' ;
			// await this.$onLaunched;
			
		},
		onShow() {
			// 返回刷新: https://www.mescroll.com/uni.html#note 第二点
			// if(this.canReset){
			// 	let curMescroll = this.getMescroll(this.tabIndex)
			// 	curMescroll && curMescroll.resetUpScroll()
			// }
			// this.canReset = true
		} ,
	}
</script>

<style>
</style>
